<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <body>
        <ui:composition template="../templateRecepcion/template.xhtml">
            <ui:define name="content">
                <h:form id="formularioAgendarCitasID" styleClass="form" >
                    <p:remoteCommand  name="iniciarDatos"
                                      process="@this" 
                                      update="formularioAgendarCitasID"
                                      actionListener="#{agendarCitasControlador.iniciarDatos()}" />
                    <p:growl id="messages" autoUpdate="true" />
                    <p:panel id="panelCalendarioID" styleClass="panel" >
                        <h:panelGrid columns="2" styleClass="panelGridAnchoTotal" >
                            <p:outputLabel value="Medico:" styleClass="outPutLabel"/>
                            <p:selectOneMenu value="#{agendarCitasDataManager.prestador}" 
                                             styleClass="selectOneMenu">  
                                <f:selectItems value="#{agendarCitasControlador.prestadores}" />
                                <f:converter converterId="prestadorConvertidor"/>
                                <p:ajax event="change" update="panelCalendarioCitasID" 
                                        listener="#{agendarCitasControlador.generarCitas()}"/>
                            </p:selectOneMenu>
                        </h:panelGrid>

                        <p:panel id="panelCalendarioCitasID" styleClass="panel" header="Calendario" >
                            <p:schedule id="calendarioID" value="#{agendarCitasDataManager.scheduleModel}" 
                                        draggable="false" resizable="false">
                                <p:ajax event="eventSelect" listener="#{agendarCitasControlador.seleccionEvento}" 
                                    process="@this" update="dialogDatosCitaID"
                                    oncomplete="ocultarEspera();PF('dialogDatosCitaWV').show()"
                                    onstart="mostrarEspera();" />
                                <p:ajax event="dateSelect" listener="#{agendarCitasControlador.seleccionarDiaParaCita}" 
                                    update="dialogAgendarCitaID @this" 
                                    oncomplete="ocultarEspera();PF('dialogAgendarCitaWV').show()"
                                    onstart="mostrarEspera();"/>
                            </p:schedule>
                        </p:panel>


                    </p:panel>
                    <!-- dialogos -->
                    <p:dialog id="dialogAgendarCitaID" widgetVar="dialogAgendarCitaWV" header="Cita" 
                              showEffect="clip" hideEffect="clip" modal="true" 
                              styleClass="dialog"> 
                        <h:panelGrid columns="1" styleClass="panelGridAnchoTotal">
                            <f:facet name="header" rendered="#{agendarCitasDataManager.irACita}">
                                <p class="facet" > #{agendarCitasDataManager.mensaje} </p>
                            </f:facet>
                            <h:panelGrid styleClass="panelGridAnchoTotal" columns="2"> 
                                <p:commandButton value="Agendar Cita?" 
                                                 icon="ui-icon-check"
                                                 action="agendarCitas_seleccionCliente?faces-redirect=true"
                                                 styleClass="comandButton"
                                                 onclick="mostrarEspera();" oncomplete="ocultarEspera()"
                                                 rendered="#{agendarCitasDataManager.irACita}">
                                    <f:setPropertyActionListener target="#{agendarCitasSeleccionClienteDataManager.fechaSeleccionadaParaCita}"
                                                                 value="#{agendarCitasDataManager.fechaSeleccionadaParaCita}"/>
                                    <f:setPropertyActionListener target="#{agendarCitasSeleccionClienteDataManager.prestador}"
                                                                 value="#{agendarCitasDataManager.prestador}"/>
                                </p:commandButton>
                                <p:commandButton value="Cerrar" 
                                                 icon="ui-icon-circle-close"
                                                 oncomplete="ocultarEspera()"
                                                 styleClass="comandButton"
                                                 onclick="mostrarEspera();PF('dialogAgendarCitaWV').hide()">
                                </p:commandButton>
                            </h:panelGrid>
                        </h:panelGrid>
                    </p:dialog>
                    
                    <p:dialog id="dialogDatosCitaID" widgetVar="dialogDatosCitaWV" header="Cita" 
                              showEffect="clip" hideEffect="clip" modal="true" 
                              styleClass="dialog"> 
                        <p:panel id="panelDialogDatosCitaID" styleClass="panel" >
                            <h:panelGrid columns="1" styleClass="panelGridAnchoTotal" >
                                <f:facet name="header">
                                    <p class="facet"> Datos Cita:</p>
                                </f:facet>
                                <h:panelGrid columns="2" styleClass="panelGridAnchoTotal" >
                                    <p:outputLabel value="Fecha Cita:" styleClass="outPutLabel"/>
                                    <p:inputMask value="#{agendarCitasDataManager.cita.fechaCita}" 
                                                 mask="99/99/9999 99:99" styleClass="inputMask"
                                                 readonly="true">  
                                        <f:convertDateTime pattern="dd/MM/yyyy HH:mm" />  
                                    </p:inputMask>

                                    <p:outputLabel value="Tipo de Cita:" styleClass="outPutLabel"/>
                                    <p:inputText value="#{agendarCitasDataManager.cita.tipoCita.nombre}" 
                                                 styleClass="inputTextDeshabilitado" readonly="true"/>

                                    <p:outputLabel value="Estado de Cita:" styleClass="outPutLabel"/>
                                    <p:inputText value="#{agendarCitasDataManager.cita.estado.descripcion}" 
                                                 styleClass="inputTextDeshabilitado" readonly="true"/>
                                </h:panelGrid>
                            </h:panelGrid>
                            
                            <h:panelGrid columns="2" styleClass="panelGridAnchoTotal" >
                                <f:facet name="header">
                                    <p class="facet"> Datos Cliente:</p>
                                </f:facet>
                                <h:panelGrid columns="2" styleClass="panelGridAnchoTotal" >
                                    <h:outputLabel value="Nombre:" />  
                                    <p:inputText value="#{agendarCitasDataManager.cita.cliente.nombre}" readonly="true"
                                                 styleClass="inputTextDeshabilitado"/> 

                                    <h:outputLabel value="Apellidos:" />  
                                    <p:inputText value="#{agendarCitasDataManager.cita.cliente.apellidosCompletos}" readonly="true"
                                                 styleClass="inputTextDeshabilitado"/> 

                                </h:panelGrid>

                                <h:panelGrid columns="2" styleClass="panelGridAnchoTotal" >
                                    <h:outputLabel value="Identificacion:" />  
                                    <p:inputText value="#{agendarCitasDataManager.cita.cliente.cedula}" readonly="true"
                                                 styleClass="inputTextDeshabilitado"/> 

                                    <h:outputLabel value="Correo Electronico:" />  
                                    <p:inputText value="#{agendarCitasDataManager.cita.cliente.correoElectronico}" readonly="true"
                                                 styleClass="inputTextDeshabilitado"/> 
                                </h:panelGrid>
                            </h:panelGrid>
                            <p:separator styleClass="separator"/>
                            <h:panelGrid styleClass="panelGridAnchoTotal" columns="3"> 
                                <p:commandButton value="Cerrar" 
                                                 icon="ui-icon-circle-close"
                                                 styleClass="comandButton"
                                                 oncomplete="ocultarEspera()"
                                                 onclick="mostrarEspera();PF('dialogDatosCitaWV').hide()">
                                </p:commandButton>
                                <p:commandButton value="Cancelar Cita" 
                                                 rendered="#{agendarCitasDataManager.cita.puedeCancelarCita}"
                                                 icon="ui-icon-circle-arrow-s"
                                                 disabled="#{agendarCitasDataManager.deshabilitarCancelarCita}"
                                                 action="#{agendarCitasControlador.cancelarCita}"
                                                 styleClass="comandButton"
                                                 update="panelDialogDatosCitaID">
                                </p:commandButton>
                            </h:panelGrid>
                        </p:panel>
                    </p:dialog>

                </h:form> 
            </ui:define>
        </ui:composition>
    </body>
</html>